function buildImage(src, alt, className) {
	var image = document.createElement("img");
	image.src = src;
	image.alt = alt;
	image.className = className;
	return image;
}

function buildEvent(id, eventMessage) {
	var event = document.createElement("div");
	event.id = id;
	event.className = "event";

	parseEventMessage(event, eventMessage);

	return event;
}
function parseEventMessage(event, eventMessage) {
	if (!event) return;
	if (!eventMessage) return;

	var reg = new RegExp("\[[a-z]+\]");
	var search = eventMessage.search(reg);
	if (search < 0) {
		event.appendChild(document.createTextNode(eventMessage));
	} else if (search == 0) {
		var match = eventMessage.match(reg)[0];
		var icon = match.substr(1, match.length -2);
		event.appendChild(buildImage("/gfx/"+ icon +".png", icon, "icon"));
		parseEventMessage(event, eventMessage.substr(match.length));
	} else {
		var text = eventMessage.substr(0, search);
		event.appendChild(document.createTextNode(text));
		parseEventMessage(event, eventMessage.substr(search));
	}
}

function buildSelection(unit) {
	var selection = document.createElement('img');
	selection.className = "selection";
	selection.src = "/gfx/marker.png";
	selection.onclick = function() {
		setSelectedUnit(unit);
	}
	setInformationMessage(selection, "Select "+ unit.name);
	return selection;
}
function buildSystem(unit) {
	var system = document.createElement('img');
	system.className = "system";
	system.src = "/gfx/planet.png";
	system.onclick = function() {
		setSelectedUnit(unit);
	}
	setInformationMessage(system, "Select "+ unit.name);
	return system;
}
function buildShip(unit) {
	var ship = document.createElement('img');
	ship.className = "ship";
	ship.src = "/gfx/ship1.png";
	ship.onclick = function() {
		setSelectedUnit(unit);
	}
	setInformationMessage(ship, "Select "+ unit.name);
	return ship;
}
function buildShips(unit) {
	var ships = document.createElement('div');
	ships.className = "ships";
	ships.appendChild(document.createTextNode(unit.ships));
	return ships;
}
function buildLabel(name) {
	var label = document.createElement('div');
	label.className = "label";
	label.appendChild(document.createTextNode(name));
	return label;
}
function buildAction(source, targ) {
	var action = document.createElement('img');
	action.className = "action button";
	action.src = "/gfx/move.png";
	action.alt = "Move";
	action.style = "position: absolute;";
	action.style.top = targ.posy +"px";
	action.style.left = targ.posx +"px";

	action.onclick = function() {
		var sourceName = source.name;
		var target = document.getElementById(targ.id);
		var targetName = target.name;
		eventView.loadEvent("[move] The Ship [ship] at the "+ sourceName +" System [system] moves to the "+ targetName +" System [system].");

		setSelectedUnit(target)
	}

	setInformationMessage(action, "Move action, Cost 10 AP");

	return action;
}

function setInformationMessage(object, over) {
	object.onmouseover = function() {
		setInformationBar(over);
	}
	object.onmouseout = function() {
		setInformationBar("");
	}
}

function buildActions(source, targets) {
	var actions = document.createElement('div');
	actions.className = "actions";

	for (var i = 0; i < targets.length; ++i) {
		var target = targets[i];
		actions.appendChild(buildAction(source, target));
	}

	return actions;
}

function buildUnit(id, name, x, y, ships, targets) {
	var map = document.getElementById('map');
	var unit = document.createElement('div');
	unit.id = id;
	unit.name = name;
	unit.className = "unit";
	unit.style.left = x + "px";
	unit.style.top  = y + "px";
	unit.style.zIndex = y;

	unit.x     = x;
	unit.y     = y;
	unit.ships = ships;

	unit.appendChild(buildSelection(unit));
	unit.appendChild(buildSystem(unit));
//	unit.appendChild(buildShip(unit));
	unit.appendChild(buildShips(unit));
	unit.appendChild(buildLabel(name));

	unit.appendChild(buildActions(unit, targets));

	unit.isSelected = function(selected) {
		if (selected) {
			unit.className = "unit selected";
		} else {
			unit.className = "unit";
		}
	};

	map.appendChild(unit);
}
